<template>
    <div id="pie" ref="pieRef">
    </div>
  </template>
  
  <script lang="ts" setup>
  import * as echarts from 'echarts/lib/echarts';
  import {
    ref,
    defineProps,
    defineEmits,
    defineExpose,
    onMounted,
    getCurrentInstance,
    nextTick,
  } from "vue";
  
  const { proxy, ctx } = getCurrentInstance() as any;
  const pie = ref(null);
  const pieRef = ref();
  
  const xData = ["2021", "2022", "20203", "2024", "2025"];
  const line = ["10", "30", "25.03", "36.01", "80.06"];
  let backData:Array<string> = [];
  
  backData = line.map(item => '100')
  const lineData = line.map(item => ((item * 1) + 30) + '')
  
  onMounted(() => {
    initImportAmountEchart();
  });
  
  
  // 初始化柱状图
  function initImportAmountEchart() {
    pie.value = echarts.init(pieRef.value);
  
    var scale = 1;
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: " {b}：{c} "
        },
        color:['#00E5F6','#87E1A1','#F9D247','#EAA675','#9FDAB3','#73B987','#9861E5','#899BEA','#8B7BD4'],   //环形颜色
        /*graphic:{       //图形中间文字
            type:"text",
            left:"center",
            top:"center",
            style:{
                text:"66",
                textAlign:"center",
                fill:"#fff",
                fontSize:30* scale,
            }
        },*/
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['15%', '23%'],       //饼图大小
                center:['70%', '50%'],
                labelLine: {    //图形外文字线
                    normal: {
                        length: 10* scale,
                        length2:30* scale,
                        lineStyle: {
                            color: "#3E4D61",
                        },
                    }
                },
                label: {
                    normal: {
                        formatter: '{c|{c}%}  \n  {b|{b}}',       //图形外文字上下显示
                        borderWidth: 20,
                        borderRadius: 4,
                        padding: [0, -35],          //文字和图的边距
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 16* scale,
                                lineHeight: 10
                            },
                            b: {                        //name 文字样式
                                fontSize: 10* scale,
                                lineHeight: 12,
                                color: '#E9E9EB',
                            },
                            c: {                   //value 文字样式
                                fontSize: 10* scale,
                                lineHeight: 12,
                                //color: '#8FADC0',
                                color: '#8FADC0',
                                align:"center"
                            }
                        }
                    }
                },
                data: [
                    {value: 12.6, name: '有色金属'},
                    {value: 2.7, name: '沥青'},
                    {value: 0.4, name: '铁矿'},
                    {value: 10.7, name: '铜精矿'},
                    {value: 3.7, name: '其他'},
                    {value: 6.9, name: '橡胶'},
                    {value: 14.6, name: '塑料'},
                    {value: 0.3, name: '木浆'},
                    {value: 0.8, name: 'PX'},
                    {value: 8.8, name: '纯苯'},
                ]
            }
        ]
    };
  
    pie.value?.setOption(option);
  
    window.addEventListener("resize", () => {
      pie.value?.resize();
    });
  }
  </script>
  
  <style scoped lang="scss">
  #pie {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  </style>
  